// high order component
import React from 'react'
// import axios from 'axios'

interface ILoaderState {
  data: any,
  isLoading: boolean
}
interface ILoaderProps {
  data: any,
}
const Hocwithloader = <P extends ILoaderState>(WrappedComponent: React.ComponentType<P>, url: string) => {
  return class LoaderComponent extends React.Component<Partial<ILoaderProps>, ILoaderState> {
    constructor(props: any) {
      super(props)
      this.state = {
        data: null,
        isLoading: false
      }
    }
    componentDidMount() {
      this.setState({
        isLoading: true,
      })
      // axios.get(url).then(result => {
      //   this.setState({
      //     data: result.data,
      //     isLoading: false
      //   })
      // })

      // Mock
      setTimeout(() => {
        this.setState({
          data: {
            message:'https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1820154701,1076679668&fm=5',
            status:'1233'
          },
          isLoading: false
        })
      }, 1000);
      
    }
    render() {

      const { data, isLoading } = this.state
      
      return (
        <>
          { (isLoading || !data) ? <p>data is loading</p> :
            <WrappedComponent {...this.props as P} data={data} />
          }
        </>
        // <WrappedComponent {...this.props as P} data={data} />
      )
    }
  }
}

export default Hocwithloader